import { PageContainer } from '@ant-design/pro-components';
// @ts-ignore
import { useParams } from 'react-router';
import { useEffect, useState } from 'react';
import {
  getInterfaceInfoByIdUsingGet,
  invokeInterfaceInfoUsingPost,
} from '@/services/openApi-backend/interfaceInfoController';
import { Badge, Button, Card, Descriptions, Form, Input, message, Space } from 'antd';
import moment from 'moment';

/**
 * 接口详情信息
 * @param param0
 * @returns
 */

const Index: React.FC = () => {
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState<API.InterfaceVO>();
  const [resData, setResData] = useState<any>();
  const params = useParams();

  const loadData = async () => {
    if (!params.id) {
      message.error('无数据，请重试');
    }
    setLoading(true);
    try {
      const res = await getInterfaceInfoByIdUsingGet({ id: params.id });
      setData(res?.data);
      setLoading(false);
    } catch (error: any) {
      setLoading(false);
      message.error('请求失败！' + error.response.data.message);
    }
  };

  useEffect(() => {
    loadData();
  }, []);

  const [form] = Form.useForm();

  const onFinish = async (requestData: API.InterfaceInfoInvokeRequest) => {
    if (!params.id) {
      message.error('无数据，请重试');
    }
    try {
      setLoading(true);
      const res = await invokeInterfaceInfoUsingPost({ id: params.id, ...requestData });
      setResData(res?.data);
      loadData();
      setLoading(false);
    } catch (error: any) {
      setLoading(false);
      message.error('请求失败！' + error.response.data.message);
    }
  };

  return (
    <PageContainer title={'接口详情'}>
      {data ? (
        <>
          <Card loading={loading}>
            <Descriptions title={data.name} column={1} layout="horizontal" bordered={true}>
              <Descriptions.Item label="描述">{data.description}</Descriptions.Item>
              <Descriptions.Item label="接口状态">
                {data.status === 0 ? (
                  <Badge text={'关闭'} status={'default'} />
                ) : (
                  <Badge text={'启用'} status={'processing'} />
                )}
              </Descriptions.Item>
              <Descriptions.Item label="调用剩余次数">{data.leftNum}</Descriptions.Item>
              <Descriptions.Item label="请求地址">{data.url}</Descriptions.Item>
              <Descriptions.Item label="请求方法">{data.method}</Descriptions.Item>
              <Descriptions.Item label="请求参数">{data.requestParams}</Descriptions.Item>
              <Descriptions.Item label="请求参数实例">{data.onlineParam}</Descriptions.Item>
              <Descriptions.Item label="请求头">{data.requestHeader}</Descriptions.Item>
              <Descriptions.Item label="响应头">{data.responseHeader}</Descriptions.Item>
              <Descriptions.Item label="创建时间">
                {moment(data.createTime).format('YYYY-MM-DD HH:mm:ss')}
              </Descriptions.Item>
              <Descriptions.Item label="更新时间">
                {moment(data.updateTime).format('YYYY-MM-DD HH:mm:ss')}
              </Descriptions.Item>
            </Descriptions>
          </Card>
          <Card title={'在线测试'}>
            <Form form={form} layout="vertical" onFinish={onFinish}>
              <Form.Item name="requestParams" label="请求参数">
                <Input placeholder="请输入测试参数" />
              </Form.Item>
              <Form.Item>
                <Space>
                  <Button type="primary" htmlType="submit">
                    调用
                  </Button>
                </Space>
              </Form.Item>
            </Form>
          </Card>
          {resData ? <Card title={'调用结果'}>{resData}</Card> : null}
        </>
      ) : (
        <>接口不存在</>
      )}
    </PageContainer>
  );
};

export default Index;
